<template>
    <view :style="{ '--color': color }">
        <navBar :title="title" :color="Color" :bgColor="bgColor" :transparent="false"></navBar>
        <view class="Info" :style="{ 'background-image': 'url(' + $staticImg('orderlistBg.png') + ')' }">
            <view class="masterInfo">
                <view class="row">
                    <view class="master_head" @click="showMyData">
                        <image :src="$imgUrls(repair_master.master_head)" mode="aspectFill" class="master_head_img"></image>
                    </view>
                    <view class="flex-1 flex f-column j-sa white">
                        <view class="row j-sb a-center">
                            <view class="d-flex a-center">
                                <text class="size36 bold500">{{ repair_master.master_name }}</text>
                                <view class="d-flex a-center m-left20" @click="showMyData">
                                    <view class="iconfont icon-paihangbang size28"></view>
                                    <text class="size26 p-left10">订单统计</text>
                                </view>
                            </view>

                            <view class="iconfont icon-shaixuan size34 padding20" @click="screenVisible = true"></view>
                        </view>
                        <text class="size28">{{ repair_master.master_tel }}</text>
                    </view>
                </view>
                <view class="iconfont icon-Store_service white size80" @click="$common.Tel(service_info.tel)"></view>
            </view>

            <view class="u-tabs">
                <u-tabs
                    :list="list"
                    :current="current"
                    :itemStyle="itemStyle"
                    lineColor="#ffffff"
                    lineWidth="30"
                    :inactiveStyle="inactiveStyle"
                    :activeStyle="activeStyle"
                    :scrollable="false"
                    @click="tabClick"
                ></u-tabs>
            </view>
        </view>

        <view class="screenBox">
            <view class="list" v-for="(item, index) in screenBox" :key="index" @click="changeScenn(item)">
                <text class="screenName">{{ item.name }}</text>
                <view class="Icon">
                    <view class="iconfont icon-paixu-shang" :class="item.orderType == orderType && orderWay == 'asc' ? 'color' : 'color_66'"></view>
                    <view class="iconfont icon-paixu-xia" :class="item.orderType == orderType && orderWay == 'desc' ? 'color' : 'color_66'"></view>
                </view>
            </view>
        </view>

        <view class="List" v-for="(item, index) in pageData" :key="index" @click="toUrl(`masterDetails?id=${item.repair_id}`)">
            <view class="orderNo">
                <text class="repair_no">订单编号:{{ item.repair_no }}</text>
                <view class="orderStom">
                    <view class="lis sha" v-if="item.typeName">{{ item.typeName }}</view>
                    <view class="lis zhens" v-if="item.repairTypeName">{{ item.repairTypeName }}</view>
                </view>
            </view>

            <view class="shop">
                <image :src="$imgUrls(item.goods_img)" mode="aspectFill" class="goods_img"></image>
                <view class="shopBox">
                    <text class="black size28 bold500 ellipsis">{{ item.goods_name }}</text>
                    <view class="dlin">
                        <view class="iconfont icon-shijian black size24 p-right10"></view>
                        <text class="serveTitme ellipsis">预约{{ item.service_time }}上门服务</text>
                    </view>
                    <view class="dlin" @click.stop="openLocation(item)">
                        <view class="iconfont icon-wodedizhi1 black size24 p-right10"></view>
                        <text class="serveTitme ellipsis">{{ item.address }}</text>
                    </view>
                </view>
            </view>
            <view class="payMentBoX">
                <view class="payMent" v-if="item.payment > 0">
                    <text class="color_33 size28">服务费用：</text>
                    <text class="color_F4 size24">￥</text>
                    <text class="color_F4 size32">{{ item.payment }}</text>
                </view>
                <view class="payMent" v-if="item.state == 7 && item.start_second">
                    <text class="color_33 size28">服务时长：</text>
                    <text class="color_F4 size26">{{ $pop.formatSeconds(item.start_second) }}</text>
                </view>
            </view>

            <view class="caoine" v-if="item.master_tip || item.master_button">
                <text class="caoTxt ellipsis" v-if="item.master_tip">
                    <text class="color_33 size28">{{ item.master_tip }}</text>
                    <text class="color_F4 size26 p-left10" v-if="item.state == 4 && item.start_second">{{ $pop.formatSeconds(item.start_second) }}</text>
                </text>
                <view class="caoBtn" v-if="item.master_button">{{ item.master_button }}</view>
            </view>
        </view>
        <emptys v-if="!pageData.length"></emptys>

        <u-popup :show="show" @close="show = false" :round="10" closeable>
            <view class="upopup">
                <text class="black size32 bold500">{{ service_info.title }}</text>
                <image :src="$imgUrls(service_info.wechat)" v-if="service_info && service_info.wechat" show-menu-by-longpress mode="aspectFill" class="wechat"></image>
            </view>
        </u-popup>

        <view class="masterShow" v-if="masterData">
            <view class="masterData_box" @animationend="onMasterBoxShown">
                <view class="iconfont icon-guanbi1" @click.stop="masterData = false"></view>
                <view class="infoTop">
                    <view class="masterInfo">
                        <view class="master_head">
                            <image :src="$imgUrls(repair_master.master_head)" mode="aspectFill" class="master_head_img"></image>
                        </view>
                        <view class="d-flex f-column j-sa white">
                            <text class="size36 bold500">{{ repair_master.master_name }}</text>
                            <text class="size28">{{ repair_master.master_tel }}</text>
                        </view>
                    </view>
                    <view class="row j-centert white size32 m-top20">服务质量</view>

                    <view class="Watch">
                        <text class="startPoint">0</text>
                        <text class="endPoint">100</text>
                        <view class="WatchData">
                            <text class="point">{{ repair_master.point }}</text>
                            <text class="level_title">{{ repair_master.level_title }}</text>
                            <view class="level_name" v-if="repair_master.level_name">{{ repair_master.level_name }}</view>
                            <view class="d-flex a-center white m-top16" @click.stop="subtract">
                                <text class="size26">扣分明细</text>
                                <view class="iconfont icon-a-zujian32 size20 p-left10"></view>
                            </view>
                        </view>
                        <view class="Line" :style="lineStyle" v-if="masterData">
                            <view class="pointer"></view>
                        </view>
                        <image :src="$staticImg('Biao.png')" mode="widthFix" class="WatchImg"></image>
                        <!-- <image :src="$staticImg('Biao.png')" mode="widthFix" class="WatchImg"></image> -->
                    </view>
                </view>

                <view class="wrapper">
                    <view class="statistics">
                        <view class="d-flex a-center">
                            <view class="iconfont icon-tongjifenxi-xiangmubiaogetongji black size36"></view>
                            <text class="black size26 p-left20">服务订单统计</text>
                        </view>
                        <view class="sticsBox">
                            <view class="lis" v-for="(item, index) in num_info" :key="index">
                                <text class="color_33 size24">{{ item.name }}</text>
                                <view class="d-flex a-center m-top10">
                                    <text class="black size50">{{ item.value }}</text>
                                    <text class="black size24 m-top16 m-left10">{{ item.unit }}</text>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="indicator">
                        <view class="row a-center">
                            <view class="d-flex a-center flex-1">
                                <view class="iconfont icon-zhiliangzhibiao black size36"></view>
                                <text class="black size26 p-left20">服务质量指标</text>
                            </view>
                            <view class="d-flex a-center p-top10 p-bot10 p-left10" @click.stop="subtract">
                                <text class="color_99 h6">扣分明细</text>
                                <view class="iconfont icon-a-zujian32 color_99 size20 p-left10"></view>
                            </view>
                        </view>

                        <view class="indicatorBox">
                            <view class="lis" v-for="(item, index) in dataIndex" :key="index">
                                <view class="d-flex a-center">
                                    <text class="size36 color">{{ item.percent }}</text>
                                    <text class="h6 color">{{ item.unit }}</text>
                                </view>
                                <text class="color_66 size24 m-top10">{{ item.title }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <u-popup :show="screenVisible" @close="screenVisible = false" mode="right">
            <view class="screenBoxpip" :style="{ 'padding-top': totalHeight + 'px' }" v-if="pageData">
                <view class="screenContent">
                    <view class="list">
                        <text class="name">下单类型</text>
                        <view class="cateBox">
                            <view class="catelist" :class="{ Active: item.guest_type == guest_type }" v-for="(item, index) in Tabs" :key="index" @click="guest_type = item.guest_type">
                                {{ item.name }}
                            </view>
                        </view>
                    </view>
                    <view class="list">
                        <text class="name">手机号码</text>
                        <view class="TelBox">
                            <input type="number" :maxlength="11" class="Tel_content" v-model="tel" placeholder="用户手机号码" />
                        </view>
                    </view>
                </view>
                <view class="screen_Bot">
                    <view class="li Reset" @click="Reset">重置</view>
                    <view class="li Config" @click="getMaster">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                timer: null,
                title: '',
                show: false,
                hideBg: true,
                statusHeight: true,
                bgColor: 'transparent',
                Color: '#ffffff',

                page: 1,
                limit: 10,
                getMore: true,
                tel: '',

                list: [],
                service_info: '',
                repair_master: {
                    point: 0
                },
                num_info: [],
                dataIndex: [],
                guest_type: '',
                Tabs: [
                    {
                        name: '业主',
                        img: 'tab01.png',
                        guest_type: 2
                    },
                    {
                        name: '商家',
                        img: 'tab02.png',
                        guest_type: 1
                    }
                ],
                screenBox: [
                    {
                        name: '按时间',
                        orderType: 'time',
                        orderWay: 'asc'
                    },
                    {
                        name: '按距离',
                        orderType: 'distance',
                        orderWay: 'asc'
                    },
                    {
                        name: '区域',
                        orderType: 'city',
                        orderWay: 'asc'
                    }
                ],
                orderType: 'time',
                orderWay: 'asc',
                master_state: 1,
                pageData: [],
                current: 0,
                masterData: false,
                showAnimation: false,
                originalPoint: 0,
                screenVisible: false
            };
        },
        async onLoad() {
            this.current = 0;
            this.orderType = 'time';
            this.orderWay = 'asc';
            this.master_state = 1;

            this.masterInfo();
            this.MasterListCount();
        },
        onShow() {
            this.page == 1;
            this.getMore = true;

            this.OrderList();
        },
        methods: {
            async masterInfo() {
                const masterInfo = await Api.masterInfo();
                this.repair_master = masterInfo.repair_master;
                this.originalPoint = masterInfo.repair_master.point;

                this.$nextTick(() => {
                    setTimeout(() => {
                        this.repair_master = masterInfo.repair_master;
                        this.showAnimation = true;
                    }, 100);
                });

                this.num_info = masterInfo.num_info;
                this.dataIndex = masterInfo.index;
                this.service_info = masterInfo.service_info;
            },
            showMyData() {
                this.masterInfo();
                this.masterData = true;
            },
            MasterListCount() {
                this.$http
                    .get({
                        url: '/orderRepairApi/getMasterListCount'
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data.list || [];
                        this.list = result;
                    });
            },
            OrderList() {
                this.$http
                    .get({
                        url: '/orderRepairApi/repairOrderList',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            orderType: this.orderType,
                            orderWay: this.orderWay,
                            master_state: this.master_state,
                            tel: this.tel,
                            guest_type: this.guest_type
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageDataa = [...this.pageData, ...result]);
                        if (result.length < this.limit) this.getMore = false;
                        clearInterval(this.timer);
                        this.startTimer();
                    });
            },
            tabClick(event) {
                this.current = event.index;
                this.master_state = event.value;
                this.init();
            },
            init() {
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.OrderList();
            },
            changeScenn(Item) {
                if (this.orderType != Item.orderType) {
                    this.orderType = Item.orderType;
                    this.orderWay = 'asc';
                } else {
                    this.orderWay = this.orderWay == 'asc' ? 'desc' : 'asc';
                }
                this.init();
            },
            startTimer() {
                this.timer = setInterval(() => {
                    this.pageData.forEach((item) => {
                        if (item.state == 4 && item.start_second) {
                            item.start_second++;
                        }
                    });
                }, 1000);
            },

            Reset() {
                this.guest_type = '';
                this.tel = '';
                this.screenVisible = false;
                this.init();
            },

            getMaster() {
                this.screenVisible = false;
                this.init();
            },
            openLocation(n) {
                if (!n.latitude || !n.longitude) return;
                uni.openLocation({
                    latitude: Number.parseFloat(n.latitude),
                    longitude: Number.parseFloat(n.longitude),
                    name: n.name,
                    address: n.address,
                    success() {
                        console.log('打开成功');
                    },
                    fail(err) {
                        uni.showToast({
                            title: '打开失败!',
                            icon: 'none'
                        });
                    }
                });
            },
            subtract() {
                console.log('1');
                this.toUrl('/zunyi/Subpoints');
            },
            onMasterBoxShown(event) {
                this.showAnimation = false;
                this.repair_master.point = 0;

                this.$nextTick(() => {
                    setTimeout(() => {
                        this.repair_master.point = this.originalPoint;
                        this.showAnimation = true;
                    }, 0);
                });
            }
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        computed: {
            ...mapState(['color', 'totalHeight']),
            itemStyle() {
                return {
                    height: '44px',
                    color: '#fff'
                };
            },
            inactiveStyle() {
                return {
                    color: '#fff'
                };
            },
            activeStyle() {
                return {
                    color: '#fff'
                };
            },
            lineStyle() {
                if (!this.masterData) {
                    return `
                           transform: rotate(-90deg);
                           transition: none;
                           transform-origin: bottom center;
                           left: 260rpx;
                       `;
                }

                const degree = -90 + (180 * this.repair_master.point) / 100;

                return `
                       transform: ${this.showAnimation ? `rotate(${degree}deg)` : 'rotate(-90deg)'};
                       transition: ${this.showAnimation ? 'transform 1s ease-out' : 'none'};
                       transform-origin: bottom center;
                       left: 260rpx;
                   `;
            }
        },

        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.OrderList();
        },
        onPageScroll(event) {
            if (event.scrollTop >= 45) {
                this.bgColor = '#fff';
                this.Color = '#000';
                this.title = '我的订单';
                uni.setNavigationBarColor({
                    frontColor: '#000000',
                    backgroundColor: '#000000'
                });
            } else {
                this.bgColor = 'transparent';
                this.Color = '#fff';
                this.title = '';
                uni.setNavigationBarColor({
                    frontColor: '#ffffff'
                });
            }
        },
        watch: {
            masterData(newVal) {
                if (newVal) {
                    this.showAnimation = false;
                    this.repair_master.point = 0;
                } else {
                    this.showAnimation = false;
                }
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $bgF8;
        padding-bottom: 20rpx;
    }
</style>
<style lang="scss" scoped>
    .screenBoxpip {
        width: 600rpx;
        height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 24rpx;
        padding-right: 24rpx;
        padding-bottom: 40rpx;
        box-sizing: border-box;
        .screenContent {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
            .list {
                display: flex;
                flex-direction: column;
                margin-bottom: 36rpx;
                .name {
                    color: #000;
                    font-size: 28rpx;
                }
                .cateBox {
                    width: 100%;
                    margin-top: 20rpx;
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    row-gap: 24rpx;
                    column-gap: 20rpx;

                    .catelist {
                        background-color: #f9f9f9;
                        min-height: 70rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10rpx;
                        font-size: 26rpx;
                        color: #363636;
                        border-radius: 6rpx;
                        overflow: hidden;
                        border: 1px solid #f9f9f9;
                    }
                    .Active {
                        color: var(--color);
                        background-color: rgba(40, 173, 242, 0.1);
                        border: 1px solid var(--color);
                    }
                }
            }
        }
        .screen_Bot {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;
            .li {
                width: 250rpx;
                height: 76rpx;
                border-radius: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
            }
            .Reset {
                background-color: #eaeaea;
                color: #666666;
            }
            .Config {
                background-color: var(--color);
                color: #fff;
            }
        }
    }
    .Watch {
        width: 520rpx;
        height: 520rpx;
        margin: 20rpx auto 0;
        position: relative;
        .WatchImg {
            width: 100%;
        }
        .startPoint {
            color: #fff;
            font-size: 26rpx;
            position: absolute;
            left: -30rpx;
            top: 240rpx;
        }
        .endPoint {
            color: #fff;
            font-size: 26rpx;
            position: absolute;
            right: -50rpx;
            top: 240rpx;
        }
        .WatchData {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            z-index: 100;
            top: 120rpx;
            .point {
                color: #fff;
                font-size: 80rpx;
            }
            .level_title {
                color: #fff;
                font-size: 30rpx;
            }
            .level_name {
                padding: 6rpx 24rpx;
                background-color: #fff;
                // background-color: rgba(255, 255, 255, 0.8);
                border-radius: 30rpx;
                color: var(--color);
                font-size: 24rpx;
                margin-top: 20rpx;
            }
        }
        .Line {
            width: 2px;
            height: 260rpx;
            background-color: transparent;
            position: absolute;
            top: 6rpx;
            .pointer {
                background-color: #f7476d;
                width: 100%;
                height: 80rpx;
                position: absolute;
                top: 0;
                left: 0;
                box-shadow: rgba(247, 79, 115, 0.8) -6rpx 0rpx 20rpx;
            }
        }
    }
    .masterShow {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3007005;
    }
    .masterData_box {
        width: 650rpx;
        height: 100%;
        background-color: #fff;

        display: flex;
        flex-direction: column;
        .icon-guanbi1 {
            color: #fff;
            font-size: 30rpx;
            padding: 30rpx;
            position: absolute;
            right: 0;
            top: 170rpx;
        }
        .infoTop {
            width: 100%;
            height: 900rpx;
            background-color: var(--color);
            padding: 180rpx 24rpx 24rpx 24rpx;
            overflow: hidden;
            .masterInfo {
                display: flex;
                align-items: center;
                .master_head {
                    width: 100rpx;
                    height: 100rpx;
                    background-color: #fff;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 30rpx;
                    .master_head_img {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 50%;
                    }
                }
            }
        }
        .wrapper {
            width: 100%;
            flex: 1;
            overflow-y: scroll;
            background-color: #fff;
            border-radius: 20rpx 20rpx 0 0;
            padding: 50rpx 24rpx;
            margin-top: -100rpx;
            display: flex;
            flex-direction: column;
            .statistics {
                display: flex;
                flex-direction: column;
                .sticsBox {
                    width: 100%;
                    background-color: #fff0e1;
                    padding: 20rpx 0;
                    border-radius: 20rpx;
                    display: flex;
                    align-items: center;
                    margin-top: 24rpx;
                    .lis {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
            .indicator {
                display: flex;
                flex-direction: column;
                margin-top: 40rpx;
                .indicatorBox {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    .lis {
                        width: 33.3%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        margin-top: 30rpx;
                    }
                }
            }
        }
        animation: slideIn 0.3s ease-out forwards;
    }

    @keyframes slideIn {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }

    .Info {
        width: 100%;
        height: 442rpx;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        .masterInfo {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30rpx;
            margin-top: 200rpx;
            .master_head {
                width: 126rpx;
                height: 126rpx;
                background-color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 30rpx;
                .master_head_img {
                    width: 114rpx;
                    height: 114rpx;
                    border-radius: 50%;
                }
            }
        }
        .u-tabs {
            width: 100%;

            margin-top: 10rpx;
        }
    }

    .screenBox {
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        .list {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            .screenName {
                color: #666666;
                font-size: 24rpx;
                padding-right: 10rpx;
            }
            .Icon {
                display: flex;
                flex-direction: column;
                margin-top: 6rpx;
                .iconfont {
                    color: #666;
                    font-size: 20rpx;
                    zoom: 0.7;
                }
            }
        }
    }

    .TelBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .Tel_txt {
            color: #000;
            font-size: 26rpx;
            padding-right: 20rpx;
        }
        .Tel_content {
            flex: 1;
            height: 76rpx;
            padding: 0 20rpx;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 8rpx;
            font-size: 26rpx;
            color: #000;
            margin-top: 20rpx;
        }
    }

    .List {
        width: 710rpx;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 20rpx 20rpx 0 20rpx;
        margin: 24rpx auto;
        .orderNo {
            width: 100%;
            display: flex;
            align-items: center;
            .repair_no {
                flex: 1;
                color: #333333;
                font-size: 24rpx;
            }
            .orderStom {
                display: flex;
                align-items: center;
                .lis {
                    padding: 4rpx 10rpx;
                    font-size: 24rpx;
                    border-radius: 6rpx;
                    margin-left: 12rpx;
                }
                .lis:first-child {
                    margin-left: 0;
                }
                .sha {
                    background-color: #edf5ff;
                    color: var(--color);
                }
                .zhens {
                    background-color: #fff7ed;
                    color: #ffa641;
                }
            }
        }

        .shop {
            width: 100%;
            display: flex;

            padding: 24rpx 0;
            .goods_img {
                width: 144rpx;
                height: 144rpx;
                border-radius: 10rpx;
                margin-right: 24rpx;
            }
            .shopBox {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .dlin {
                    display: flex;
                    align-items: center;
                    margin-top: 10rpx;
                    .serveTitme {
                        flex: 1;
                        color: #666666;
                        font-size: 24rpx;
                    }
                }
            }
        }
        .payMentBoX {
            font-size: 28rpx;
            padding-bottom: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .payMent {
                font-size: 28rpx;
            }
        }

        .caoine {
            width: 100%;
            padding: 20rpx 0;
            display: flex;
            align-items: center;
            border-top: 1px solid #eaeaea;

            .caoTxt {
                flex: 1;
            }
            .caoBtn {
                padding: 14rpx 40rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 24rpx;
                border-radius: 30rpx;
            }
        }
    }

    .upopup {
        width: 100%;
        padding: 50rpx 30rpx 30rpx 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .wechat {
            width: 360rpx;
            height: 360rpx;
            margin-top: 30rpx;
        }
    }

    // .Tabs {
    //     width: 100%;
    //     height: 100rpx;
    //     background-color: #fff;
    //     border-top: 1rpx solid #f8f8f8;
    //     position: fixed;
    //     left: 0;
    //     z-index: 100;
    // }
    // .Wrapper {
    //     width: 100%;
    //     margin-top: 120rpx;
    // }
    // .list {
    //     width: 710rpx;
    //     background-color: #fff;
    //     padding: 24rpx;
    //     border-radius: 10rpx;
    //     margin: 24rpx auto 0;
    // }
</style>
